<script setup lang="ts">
import type { PopupPosition } from "vant";
import { ref, watch, useAttrs } from "vue";
import usePost from "@/hooks/usePost";
import { formatDate } from "@/utils";
import { type ProcessTaskStatusEnum, ProcessTaskStatusMap } from "./constants";

/** 获取审批历史 */
const { runAsync: getApprovalHistoryApi } = usePost("POST", "/bpm-api/process/getHistoric");
/** 获取审批预览 */
// const { runAsync: getApprovalPreviewDataApi } = usePost<any[]>("GET", "/bpm-api/process/getProcessActAssignee");

const props = withDefaults(
		defineProps<{
			modelValue: boolean;
			procInstId: string;
			position?: PopupPosition;
		}>(),
		{
			position: "right"
		}
	),
	emits = defineEmits<{
		(e: "update:modelValue", value: boolean): void;
	}>();
const attrs = useAttrs();

const popupShow = ref(false),
	approvalHistory = ref<any[]>([]),
	// approvalPreview = ref<any[]>([]),
	// dataIntegration = ref<any[]>([]),
	stepsActive = ref(0);
/** 状态对应颜色枚举 */

/** 获取审批历史 */
const getApprovalHistory = async () => {
	const { data } = await getApprovalHistoryApi({
		procInstId: props.procInstId,
		size: 999
	});
	approvalHistory.value = data.length ? data : [];
	approvalHistory.value = approvalHistory.value.map(i => {
		if (i.status === "待处理" && i.candidateUserName) {
			i.assigneeName = i.candidateUserName;
		}
		return i;
	});
	const firstIndex = approvalHistory.value.findIndex(i => i.status === "待处理");
	stepsActive.value = firstIndex === -1 ? (approvalHistory.value.length ? approvalHistory.value.length - 1 : 0) : firstIndex;
};
getApprovalHistory();

/** 数据整合 */
// watchEffect(() => {
// 	// 历史中的待处理
// 	const historyFirst = approvalHistory.value.find(i => i.status === "待处理");
// 	if (historyFirst) {
// 		// 查找待处理数据的位置
// 		const unprocessedIndex = approvalPreview.value.findIndex(i => i.activityId === historyFirst?.activityId);
// 		// 取出待处理数据之后的数据
// 		const previewData = approvalPreview.value
// 			.slice(unprocessedIndex + 1)
// 			.filter((item: any) => !approvalHistory.value.find(i => i.activityId === item.activityId));
// 		const totalData = [...approvalHistory.value, ...previewData];
// 		const firstIndex = totalData.findIndex(i => i.status === "待处理");
// 		stepsActive.value = firstIndex === -1 ? 0 : firstIndex;
// 		// 过滤activityId重复的数据
// 		dataIntegration.value = totalData;
// 	} else {
// 		dataIntegration.value = [...approvalHistory.value];
// 		stepsActive.value = dataIntegration.value.length - 1;
// 	}
// });

watch(
	() => props.modelValue,
	value => {
		popupShow.value = value;
	}
);

watch(
	() => popupShow.value,
	value => {
		emits("update:modelValue", value);
	}
);

defineExpose({
	getApprovalHistory
});
</script>

<template>
	<van-popup v-model:show="popupShow" v-bind="attrs" :position="props.position" safe-area-inset-bottom>
		<div class="approve_detail_popup">
			<van-steps :active="stepsActive" direction="vertical" inactive-icon="down" active-color="#1E8FA0">
				<van-step v-for="(item, index) in approvalHistory" :key="index">
					<p>
						<span>{{ item.activityName }}</span> <span v-if="item.assigneeName">({{ item.assigneeName }})</span>
					</p>
					<div class="info">
						<van-tag :type="ProcessTaskStatusMap[item.status as ProcessTaskStatusEnum]">{{ item.status }}</van-tag>
						<p class="end_time" v-if="item.endTime">{{ formatDate(item.endTime, "YYYY-MM-DD HH:mm:ss") }}</p>
					</div>
					<p class="comment" v-if="item.comment">退回原因：{{ item.comment }}</p>
				</van-step>
			</van-steps>
		</div>
	</van-popup>
</template>

<style scoped lang="less">
* {
	margin: 0;
}
.approve_detail_popup {
	width: 70vw;
	height: 100vh;
	.info {
		width: 100%;
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-top: 5px;
		.end_time {
			font-size: 12px;
		}
	}
	.comment {
		background-color: #f6f6f6;
		padding: 4px 5px;
		margin-top: 5px;
		border-radius: 3px;
	}

	// 设置已完成步骤的icon颜色
	:deep(.van-step--finish) .van-step__icon {
		color: #1e8fa0;
	}
}
</style>
